﻿<template>
  <div>
    <draggable v-model="dynamicTags" :disabled="disabled" item-key="element">
      <template #item="{ element }">
        <el-tag
          :closable="!disabled"
          :key="element.id"
          :type="getType(element.txt)"
          :size="size"
          :class="{ linetag: oneTagOneLine }"
          :disable-transitions="false"
          @click="handleClick(element)"
          @close="handleClose(element)"
          >{{ element.txt }}</el-tag
        >
      </template>
    </draggable>
    <el-autocomplete
      class="input-new-tag"
      v-if="tags && inputVisible"
      v-model="inputValue"
      trigger-on-focus
      :fetch-suggestions="querySearch"
      clearable
      ref="saveTagInput"
      @keyup.enter.stop="handleInputConfirm"
      @select="handleSelect"
    >
    </el-autocomplete>
    <el-input
      class="input-new-tag"
      v-if="!tags && inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      @keyup.enter.stop="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button
      v-if="!disabled && !inputVisible"
      class="button-new-tag"
      @click="showInput"
      >+</el-button
    >
  </div>
</template>

<script>
import draggable from "./vuedraggable/vuedraggable.js";

export default {
  name: "RightsTag",
  components: {
    draggable,
  },
  emits: ["update:modelValue"],
  props: {
    modelValue: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    typeOf: String,
    title: String,
    cfg: Object,
    getTagType: Function,
    defaultType: String,
    addFunc: Function,
    clickFunc: Function,
    oneTagOneLine: Boolean, //一行显示一个tag
    size: {
      type: String,
      default: "default",
    },
    tags: String,
  },
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      drag: false,
      nextId: 1,
    };
  },
  created() {
    var str = this.modelValue || "";
    this.dynamicTags = str
      .split(";")
      .filter((p) => p != "")
      .map((p) => {
        return { txt: p };
      });
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      this.updateModelValue();
    },

    showInput() {
      if (this.addFunc && typeof this.addFunc == "function") {
        this.addFunc.apply(this);
        return;
      }
      if(this.typeOf){
        this.doSelect();
        return;
      }
      this.inputVisible = true;
      if (this.$refs.saveTagInput) {
        this.$nextTick((_) => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      }
    },

    doSelect() {
      let cfg = {
        tbname: "Form2_81",
        clearable: this.clearable,
        fields: "Text2,Text3",
        excludeSearch: "Text1Eq",
        allowAdd: true,
        search: {
          _Text1ReadOnly: true,
          Text1: this.typeOf,
          Text1Eq: this.typeOf,
        },
        ...this.cfg,
      };
      if (this.title) {
        cfg.title = this.title;
      }
      $server.dlg.select(cfg).then((res) => {
        debugger
        if (res.length == 0) {
          this.txt = "";
          return;
        }

        const txt = res[0][this.cfg?.selectField || "Text2"];
        this.dynamicTags.push({ txt: txt });
        this.updateModelValue();
      });
    },

    handleClick(item) {
      if (this.disabled) return;
      if (this.clickFunc) {
        this.clickFunc.apply(this);
        return;
      }
      let cfg = {
        modelValue: item.txt,
        title: "文字内容",
        typeOf: "text",
        disabled: this.disabled,
        required: true,
        "onUpdate:modelValue": (val) => {
          item.txt = val;
          this.updateModelValue();
        },
      };
      $server.dlg.open("TextImageEditorDlg", cfg);
    },
    handleInputConfirm(e) {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push({ txt: inputValue });
        this.updateModelValue();
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    handleSelect(item) {
      let inputValue = item.value;
      if (inputValue) {
        this.dynamicTags.push({ txt: inputValue });
        this.updateModelValue();
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    getType(tag) {
      if (this.getTagType) {
        return this.getTagType(tag);
      }
      return this.defaultType;
    },

    querySearch(query, cb) {
      let result = this.allTags;
      if (query) {
        result = this.allTags.filter(
          (p) => p.value.toLowerCase().indexOf(query.toLowerCase()) != -1
        );
      }
      cb(result);
    },
    updateModelValue() {
      if (!this.disabled) {
        this.$emit(
          "update:modelValue",
          this.dynamicTags.map((p) => p.txt).join(";")
        );
      }
    },
  },
  computed: {
    allTags() {
      return (this.tags || "")
        .split(";")
        .filter((p) => p.length > 0)
        .map((p) => {
          return { value: p };
        });
    },
  },
  watch: {
    modelValue: function (val) {
      var str = this.modelValue || "";
      this.dynamicTags = str
        .split(";")
        .filter((p) => p != "")
        .map((p) => {
          return { txt: p };
        });
    },
    dynamicTags() {
      this.updateModelValue();
    },
  },
};
</script>
<style scope>
.el-tag + .el-tag {
  margin-right: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 100%;
  vertical-align: bottom;
}

.linetag {
  white-space: pre-wrap;
  height: unset !important;
  padding: 4px !important;
  margin: 4px 0 !important;
  font-size: 1.1em !important;
  line-height: 1.2em !important;
  display: block !important;
}
</style>
